<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 100px;
				height: 100px;
				margin: 20px;
				border-radius: 50px;
			}

			.box1 {
				background: red;
			}

			.box2 {
				background: yellow;
			}

			.box3 {
				background: green;
			}

			.off {
				opacity: 0.2;
			}		
		</style>
		
		<script src="js/jquery-3.4.1.min.js"></script>
	</head>
	<body>
		<!-- 
		  $(selector).addClass(类别名称);
		  $(selector).removeClass(类别名称)
		  
		  $(selector).toggleClass(类别名称)
		  当类别存在时会删除类别
		  当类别不存在时会新增类别
		 -->

		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>

		<script>
			$(function(){
				$("div").on("click", function() {
					$(this).toggleClass("off");					
				});
			});
			
			
		</script>
	</body>
</html>
